<!-- 令牌管理 -->
<template>

  <div class="pag" :token="tokenInfo">
    <token-head @fresh="freshHandle" :showSuperEntry="true"></token-head>
    <div class="token-action-wrap">
      <div class="token-action">
        <div class="action-item" @click="goAction('tokenBuy')">
          <img src="~assets/images/token/buy.png" alt="">
          购买
        </div>
        <div class="action-item" @click="goAction('borrow')">
          <img src="~assets/images/token/borrow.png" alt="">
          <div class="borrow-lb">
            <span class="remind-spot" v-if="tokenInfo.notification.leaseStatus !== null && tokenInfo.notification.leaseStatus < 5  && tokenInfo.notification.leaseStatus != -1"></span>
            租借
          </div>
        </div>
        <div class="action-item" @click="goAction('tokenSell')">
          <img src="~assets/images/token/sell.png" alt="">
          出售
        </div>
      </div>
      <div class="action-detail" @click="goOrder">
        <span class="remind-spot" v-if="tokenInfo.notification.borrowStatus == 1"></span>
        查看详情
      </div>
    </div>
<!--    <div class="l-r-token">可新增节点<span>{{ tokenInfo.remainingNodeNum }}</span>个（路由器除外）</div>-->
    <div class="pledge router-pledge" @click="goPledge('router')">
      <h3>路由器挖矿质押</h3>
      <p>已质押 {{ router.nodePledgeNum }}块 碎片</p>
      <p>{{ router.tokenPledgedNum }}块 令牌</p>
    </div>
    <div class="l-r-token" v-if="false">今日Linux和客户端全网可新增<span>{{ todayCanPledgeNum }}</span>块令牌</div>
    <div class="pledge linux-pledge" @click="goPledge('linux')">
      <h3>Linux挖矿质押</h3>
      <p>已质押 {{ linux.nodePledgeNum }}块 令牌</p>
<!--      <div>今日可新增质押：<i>500</i>全网已质押：<i>324</i></div>-->
    </div>
    <div class="pledge pc-pledge" @click="goPledge('pc')">
      <h3>客户端挖矿质押</h3>
      <p>已质押 {{ pc.nodePledgeNum }}块 令牌</p>
<!--      <div>今日可新增质押：<i>500</i>全网已质押：<i>324</i></div>-->
    </div>
  </div>

</template>

<script>
import tokenHead from 'cpnts/token-head.vue'

  export default {
      components: {
          'tokenHead': tokenHead,
      },
    data() {
      return {
          "todayCanPledgeNum": 0,
          "linux": {"pledgeNum": 0, "nodeNum": 0, "nodePledgeNum": 0, "tokenNum": 0, "tokenRentNum": 0},
          "pc": {"pledgeNum": 0, "nodeNum": 0, "nodePledgeNum": 0, "tokenNum": 0, "tokenRentNum": 0},
          "router": {"pledgeNum": 0, "nodeNum": 0, "nodePledgeNum": 0, "tokenNum": 0, "tokenRentNum": 0}
      }
    },
    beforeRouteEnter (to, from, next) {
      next((vm) => {
        Object.assign(vm, to.query)
          vm.loadPage()
      })
    },
      computed: {
          tokenInfo(){
              let token = this.$store.state.tokenInfo
              if(token){
                  Object.assign(this, token)
              }
              return token
          },
      },
    methods: {
        freshHandle(){
            this.loadPage()
        },
        loadPage(){
            this.$store.dispatch('getTokenInfo')
        },
        resetData(){

        },
        goOrder(){
            this.$router.push({path: 'order'});
        },
        goPledge(type){
            // this.$router.push({path: 'pledge', query: {
            //         type
            //     }});

            if (type == 'router' || type == 'pc') {
              this.showToast('功能已关闭！', 'warn');
              return;
            } else {
              this.$router.push({path: 'pledge', query: {
                  type
                }});
            }

            /*if (type == 'router') {
              this.$router.push({path: 'routerPledge', query: {
                  type
                }});
            } else {
              this.$router.push({path: 'pledge', query: {
                  type
                }});
            }*/

        },
        goRouter(type){
            this.$router.push({path: 'routerPledge2', query: {
                    type: 'router'
                }});
        },
        goAction(path){
          if (path == 'tokenBuy' || path == 'borrow') {
            this.showToast('功能已关闭！', 'warn');
            return;
          } else {
            this.$router.push({path, query: {
              uid: this.uid,
              token: this.token
            }});
          }
            /*this.$router.push({path, query: {
                uid: this.uid,
                    token: this.token
                }});*/
        },
      showToast(msg, type) {
        const toast = this.$createToast({
          time: 2000,
          txt: msg,
          type: type
        });
        toast.show();
      },
      toastTip (info) {
        this.$warn(info)
      }
    }
  }
</script>

<style lang="scss" scoped>


  .pag {
    background: #F5F5FB;
    height: 100%;
    font-size:30px;
    overflow-x: hidden;
    overflow-y: auto;
  }



  .token-action-wrap {
    //width:690px;
    height:262px;
    background:rgba(255,255,255,1);
    box-shadow:0px 1px 2px 0px rgba(10,29,87,0.2);
    border-radius:14px;
    margin: 30px;
  }

  .token-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 172px;
    padding: 0 56px;
  }

  .action-item {
    color:rgba(32,44,91,1);
    text-align: center;
    img {
      display: block;
      height: 88px;
      width: 88px;
      margin: 0 auto 17px auto;
    }
  }

  .borrow-lb {
    display: flex;
    align-items: center;
    justify-content: center;
    .remind-spot {
      margin-right: -12px;
      transform: translate(-19px, 0);
    }
  }

  .action-detail {
    border-top: 2px solid #F4F4F4;
    margin: 0 24px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    color:rgba(18,83,252,1);
    position: relative;
    .remind-spot {
      position: absolute;
      top: 50%;
      left: 30%;
      transform: translate(0, -50%);
    }
  }

  .pledge {
    //width: 690px;
    height: 200px;
    margin: 0 30px 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    h3 {
      font-size:40px;
      font-weight:600;
      color:rgba(255,255,255,1);
      text-shadow:0px 2px 4px rgba(0,89,240,0.5);
      margin-bottom: 20px;
      padding-right: 46px;
    }
    p {
      font-size:26px;
      font-weight:600;
      color:rgba(255,255,255,1);
      text-shadow:0px 2px 4px rgba(0,89,240,0.5);
      padding-right: 46px;
      &:nth-of-type(2) {
        opacity: .3;
        margin: 10px 0 -36px 0;
      }
    }
    div {
      min-width:450px;
      height:40px;
      background:rgba(255,255,255,.6);
      border-radius:20px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      color: #202C5B;
      margin-top: 20px;
      margin-right: 41px;
      i {
        font-style: normal;
        &:nth-of-type(1) {
          color: #DC0630;
          margin-right: 5px;
        }
        &:nth-of-type(2) {
          color: #00A989;
        }
      }
    }
  }


  .router-pledge {
    background: url("~assets/images/token/router.png") 24px center / 174px 174px no-repeat,
    url("~assets/images/token/router-bg.png") center top / contain no-repeat;
  }

  .linux-pledge {
    background: url("~assets/images/token/linux.png") 24px center / 174px 174px no-repeat,
    url("~assets/images/token/linux-bg.png") center top / contain no-repeat;
  }


  .pc-pledge {
    background: url("~assets/images/token/pc.png") 24px center / 174px 174px no-repeat,
    url("~assets/images/token/pc-bg.png") center top / contain no-repeat;
  }


  .l-r-token {
    font-size: 26px;
    color: #71768C;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 28px 0;
    &:before {
      content: '';
      flex: 1;
      height: 2px;
      background: #CDCFD9;
      margin-right: 30px;
    }
    &:after {
      content: '';
      flex: 1;
      height: 2px;
      background: #CDCFD9;
      margin-left: 30px;
    }
    span {
      color: #DC0630;
      padding: 0 5px;
    }
  }

</style>



<style>
  .remind-spot {
    width:12px;
    height:12px;
    background:rgba(255,37,37,1);
    border-radius:50%;
  }
</style>








